<template>
	<view>
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="content echarts" @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts"
			id="echartsline2"></view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import echarts from "../../static/common/js/echarts.min.js"
	export default {
		props: {
			chartBarStackData: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				option: {
					backgroundColor: '#ffffff', //整个图标的背景色
					//图表title
					// title: {
					//     top: '2%',
					//     left: 'center',
					//     text: '配料预警',
					//     textStyle: {
					//         align: 'center',
					//         color: '#999999',
					//         fontSize: 18
					//     }
					// },
					//这个图标区域
					grid: {
						left: '3%',
						right: '6%',
						top: '0',
						bottom: '0',
						containLabel: true
					},
					//滚动条样式
					dataZoom: [],
					//x轴
					xAxis: {
						show: false, //是否显示坐标轴
					},
					//y轴
					yAxis: {
						type: 'category',
						//y轴刻度说明
						axisLabel: {
							margin: 10, //y轴文刻度说明与图的距离
							show: true,
							color: '#333333',
							fontSize: 12
						},
						//y轴刻度标记
						axisTick: {
							show: false,
						},
						//y轴线
						axisLine: {
							show: false,
						},
						//y轴刻度说明。如['5级隐患','4级隐患','3级隐患','2级隐患','1级隐患']
						data: []
					},
					//图表数据
					series: [
						// 外边框
						{
							type: 'bar',
							// barCategoryGap: '5%',
							barWidth: 20,
							//外边框上的文字
							label: {
								normal: {
									show: true,
									position: 'inside',
									padding: [0, 0, 0, 0],//文字位置
									color:'#DE121C',//文字颜色
									fontSize: 10,//文字大小
									borderWidth: 0,
								}
							},
							//外边框样式
							itemStyle: {
								normal: {
									borderColor: '#4EAAE6',
									borderWidth: 0.5,
									barBorderRadius: 5,
									color: '#ffffff'
								},
							},
							z: 1,
							//外边框各组数据，例[100, 100, 100]
							data: []
						},
						// 内边框
						{
							type: 'bar',
							//内边框相对外边框的位置
							barGap: '-100%',
							barWidth: 20,
							//内边框样式
							itemStyle: {
								normal: {
									barBorderRadius: 5,
								}
							},
							//内边框最大数值
							max: 18,
							//内边框上的文本标签
							label: {
								normal: {
									show: true,
									position: 'inside',
									padding: [0, 0, 0, 30],//文字位置
									color : '#ff0000',
									fontSize: 6,//文字大小
									borderWidth: 0,
									rich:{
										a:{
											color:'#666666'
										},
										b:{
											color:'#666666'
										},
										c:{
											color: '#666666'
										}
									}
								}
							},
							labelLine: {
								show: true,
							},
							z: 2,
							//内边框各组数据，例[50, 40, 60,70, 30, 80,40],
							data: []
						}
					]
				}
			}
		},
		mounted() {
			this.refreshData();
		},
		watch: {
			chartBarStackData: function(newQuestion, oldQuestion) {
				this.refreshData()
			}
		},
		methods: {
			refreshData() {
				this.option.yAxis.data = this.chartBarStackData.materialNames;
				this.option.series[0].data = this.chartBarStackData.totalRemainingDays;
				this.option.series[1].data = this.chartBarStackData.remainingDays;
				if(this.option.yAxis.data.length > 6) {
					let zoomStyle = {
						type: 'slider',
						show: true,
						"filterMode": "empty",
						"disabled": false,
						yAxisIndex: 0,
						right: '2%', //组件离容器右侧的距离
						// top: '25%',
						// bottom: '15%',
						start: 0, //滚动条的起始位置
						end: 40, //滚动条的起始位置
						startValue: 0, //数据窗口范围的起始数值 
						endValue: 100, //数据窗口范围的结束数值。 
						showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
						//设置滚动条样式
						width: 10,
						backgroundColor: '#eeeeee',//未选中区域的填充颜色
						borderColor: "#eeeeee",
						//设置滚动条手柄样式
						fillerColor: '#cecece',
						//滑动条上选中范围2个滑动小块样式自定义
						handleSize: '80%', // 滑动条上选中范围2个滑动小块的大小
						handleColor: '#cecece', //滑动图标的颜色
						handleStyle: {
							borderColor: "#cecece",
							borderWidth: "0",
							shadowBlur: 2,
							background: "#cecece",
							shadowColor: "#cecece",
						},
						 handleIcon: "path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z",//圆形
					}
					this.option.dataZoom.push(zoomStyle);
				} else {
					this.option.dataZoom = [];
				}
			},

			//点击图标上的某项数据
			chartItemClick(options) {
				this.$emit('chartItemClick', options);
			},

			onViewClick(options) {
				console.log(options)
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/common/js/echarts.min.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echartsline2'))
				// 观测更新的数据在 view 层可以直接访问到
				//外边框标签文字内容
				this.option.series[0].label.normal.formatter = function(params) {
					let isShowDescription = params.data.isShowDescription;
					if(isShowDescription) {
						return params.data.description;
					} else {
						return ''
					}
				}
				
				//内边框颜色
				this.option.series[1].itemStyle.normal.color = function(params) {
					let value = params.data.value;
					// console.log('22222',params)
					if (value <= 3) {
						return '#DE121C'
					} else if (value > 3 && value <= 15) {
						return '#4EAAE6'
					} else {
						return '#1CBD7A'
					}
				}
				
				// 内边框文字的颜色
				this.option.series[1].label.normal.formatter = function(params) {
					console.log('333333',params)
					let value = params.data.value;
					let description = params.data.description;
					if (value == 0) {
						return ""
					} else if (value > 0 && value <= 3) {
						return "{a|"+ description +"}"
					} else if (value > 3 && value <= 15) {
						return "{b|"+ description +"}"
					} else {
						return "{c|"+ description +"}"
					}
				}
				
				myChart.setOption(this.option)

				//图表上某项的点击事件
				myChart.on('click', params => {
					// 把点击事件的数据缓存下来
					this.clickData = params;
					this.$ownerInstance.callMethod('chartItemClick', {
						value: this.clickData.data,
						name: this.clickData.name,
						seriesName: this.clickData.seriesName,
					});
					//  // 上次点击数据置空
					this.clickData = null;
				})
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				if (myChart !== undefined) {
					myChart.setOption(newValue)
				}
			},

			//整个图表的点击事件
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				// ownerInstance.callMethod('onViewClick', {
				// 	test: 'test'
				// })
			}
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.echarts {
		width: 100%;
		height: 370rpx;
	}
</style>
